<template>
  <div>
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      style="margin-top: 6px"
      label-width="100px"
    >
      <el-form-item label="邮件标题" prop="subject">
        <el-input
          v-model="form.subject"
          style="width: 646px"
          placeholder="请输入邮件标题，标题不能为空"
        />
      </el-form-item>
      <el-form-item label="收件地址" prop="tos">
        <el-input
          v-model="form.tos"
          style="width: 646px"
          placeholder="请输入收件地址，多个地址英文逗号,隔开"
        />
      </el-form-item>
    </el-form>
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        v-model="valueHtml"
        style="height: 500px; overflow-y: hidden"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
    <el-button
      :loading="loading"
      class="mt-[10px]"
      size="medium"
      type="primary"
      @click="doSubmit"
      >发送邮件</el-button
    >
  </div>
</template>

<script lang="ts" setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, ref, shallowRef } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { send } from "@/api/email";
import { ElNotification } from "element-plus";

const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("");
const mode = ref("default");

const toolbarConfig = {};
const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: {
    uploadImage: {
      async customUpload(file, insertFn) {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          console.log(reader.result); // base64
          insertFn(reader.result);
        };
        reader.onerror = function (err) {
          console.log(err);
        };
      }
    }
  }
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = editor => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const formRef = ref(null);
const loading = ref(false);
const form = ref({
  subject: "",
  tos: "",
  content: ""
});
const rules = ref({
  subject: [{ required: true, message: "标题不能为空", trigger: "blur" }],
  tos: [{ required: true, message: "收件人不能为空", trigger: "blur" }]
});
const doSubmit = () => {
  formRef.value.validate(valid => {
    if (valid) {
      loading.value = true;
      form.value.content = valueHtml.value;
      send(form.value)
        .then(res => {
          ElNotification({
            title: "系统提示",
            message: "发送成功",
            type: "success"
          });
          loading.value = false;
        })
        .catch(err => {
          loading.value = false;
          console.log(err.response.data.message);
        });
    } else {
      return false;
    }
  });
};
</script>
